<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript"></script>
    <style>
        *{
            margin: 10px;
        }
        .childbox1{
            background-color: antiquewhite;
        }
        .childbox2{
            background-color: rgb(154, 123, 83);
        }
        ul{
            width: 151px;
            height: 200px;
            overflow:scroll;
            padding-left: 0px;
        }
        li{
            list-style: none;
            padding-top: 50px;
            margin-left: 0;
            
        }
    </style>
</head>
<body>
    <!-- 
        Vue中的事件修饰符:
            1.prevent:阻止默认事件（常用）;
            2.stop:阻止事件冒泡（常用）;
            3.once:事件只触发一次（常用）;
            4.capture:使用事件的捕获模式;
            5.self:只有event.target是当前操作的元素时才触发事件;
            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
     -->

     <!-- 1.prevent:阻止默认事件（常用）; -->
     <div id="box">
        <!-- 1.prevent:阻止默认事件（常用）; -->
        <a href="http:www.baidu.com" @click.prevent="pointShow">点击跳转百度！</a>

        <!-- 2.stop:阻止事件冒泡（常用）; -->
        <p>冒泡</p>
        <div @click="pointShow" class="childbox1">
            div1
            <div @click.stop="mppoint" class="childbox2">
                div2
            </div>
        </div>

        <!-- 3.once:事件只触发一次（常用）; -->
        <button v-on:click.once="once">点击按钮</button>

        <!-- 4.capture:使用事件的捕获模式; -->
        <p>捕获</p>
        <div @click.capture="pointShow" class="childbox1">
            div1
            <div @click="mppoint" class="childbox2">
                div2
            </div>
        </div>

        <!-- 5.self:只有event.target是当前操作的元素时才触发事件; -->
        <div @click.self="pointShow" class="childbox1">
            div1
            <div @click="mppoint" class="childbox2">
                div2
            </div>
        </div>

        <!-- 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕; -->
        <ul @scroll.passive="goon">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>
     </div>

     <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el:"#box",
            data:{

            },
            methods:{
                pointShow(){
                    alert("触发了a标签！")
                },
                mppoint(){
                    alert("冒泡事件触发！")
                },
                once(){
                    alert("这个事件只触发一次！")
                },
                goon(){
                    // for(let i = 0;i<1000;i++){
                    //     console.log("111");
                    // };
                    // alert('这是个列表！')
                }
            }   
     })
     </script>

</body>
</html>